<template>
    <div>
<h3>房型添加</h3>
<a href="/">去显示</a>
<table class="table">
    <tbody>
        <tr>
            <td>房号</td>
            <td>
                <input type="text" v-model="data.hoomNumber">
            </td>
        </tr>
        <tr>
            <td>房间类型</td>
            <td>
                <select v-model="data.typeId">
                    <option value="0">请选择</option>
                    <option v-for="a in list" :value="a.typeId">{{ a.typeName }}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>图片</td>
            <td>
              <input type="file" @change="zhaopian">
              <img :src="axios.defaults.baseURL+data.img" style="height: 60px;width: 60px;">
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="button" class="btn btn-success" value="确定" @click="ok">
            </td>
        </tr>
    </tbody>
</table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import {ref,onMounted} from 'vue';
import { useRoute,useRouter } from 'vue-router';
const router=useRouter();
const route=useRoute();

//图片
const zhaopian=(val:any)=>{
  var a=val.target.files[0];
  var b=new FormData();
  b.append("file",a);
 
  if(a.type!="image/png"&&a.type!="image/jpeg"&&a.type!="image/webp"){
    alert("只允许上传png,jpeg,webp格式的文件");
    return;
  }
  if(a.size>(2*1024*1024)){
    alert("上传的文件不能大于2M");
    return;
  }

  axios.post("/api/Img/Img",b).then(res=>{
    data.value.img=res.data;
  })
}


//绑定
onMounted(()=>{
    bang();
})
const list=ref([{
    "typeId": 3,
    "typeName": "大床房",
    "isDel": false,
    "createUserId": 1,
    "createDate": "2025-06-02T00:00:00",
    "updateUserId": 1,
    "updateDate": "2025-06-02T00:00:00",
    "deleteUserId": 1,
    "deleteDate": "2025-06-02T00:00:00"
  }])
const bang=()=>{
    axios.get("/api/Hoom/GetHoomType").then(res=>{
        list.value=res.data;
    })
}
//添加
const data=ref({
  "isDel": false,
  "createUserId": 0,
  "createDate": "2025-06-02T09:22:44.671Z",
  "updateUserId": 0,
  "updateDate": "2025-06-02T09:22:44.671Z",
  "deleteUserId": 0,
  "deleteDate": "2025-06-02T09:22:44.671Z",
  "id": 0,
  "hoomNumber": "",
  "typeId": 0,
  "img": "",
  "state": 0
})
const ok=()=>{
    if(data.value.hoomNumber==""){
        alert("房号不能为空");
        return
    }
    axios.post("/api/Hoom/AddHoom",data.value).then(res=>{
        if(res.data==-2){
            alert("房号不能重复");
            return;
        }
        if(res.data>0){
            alert("添加成功");
            router.push("/");
            return;
        }
        else{
            alert("添加失败");
            return;
        }
    })
}
</script>

<style scoped>

</style>